<template>
	<view class="background" >
		<button class="role1" @click="setRole('辅导员')">
			<image src="../../static/coun_role.png" style="width: 28px; height: 28px; "
			></image>
			辅导员角色
		</button>

		<button class="role2" @click="setRole('学院')">
			<image src="../../static/aca_role.png" style="width: 28px; height: 28px; "
			></image>
			学院角色
		</button>
		
		<button class="role3" @click="setRole('学校')">
			<image src="../../static/sch_role.png" style="width: 28px; height: 28px; "
			></image>
			学校角色
		</button>
	</view>
</template>

<script setup>
	import { ref } from 'vue';
	
	const role = ref();

	
	const setRole = (selectedRole) => {
	  role.value = selectedRole;
	  // 将角色信息存储到本地存储
	  uni.setStorageSync('userRole', selectedRole);
	
	  // 根据角色跳转到对应的页面
    if (selectedRole !== '') {
      uni.switchTab({url: '/pages/index/index'});
    }
	};
	
</script>

<style>
    .background{
		width: 100vw;
		height: 100vh;
		background: #F3F5F9;
		position: absolute;
		
	}
	
	.role1{
		width: 351px;
		height: 80px;
		background: #FFFFFF;
		border-radius: 12px;
		
		display: flex;
		align-items: center;
		margin: auto;
		margin-top: 12px;
		
		text-indent: 30px;
		
		image{
			left: 28px;
		}
		
	}
	
	.role2{
		width: 351px;
		height: 80px;
		background: #FFFFFF;
		border-radius: 12px;
		
		display: flex;
		align-items: center;
		margin: auto;
		margin-top: 14px;
		
		text-indent: 30px;
		
		image{
			left: 28px;
		}
	}
	
	.role3{
		width: 351px;
		height: 80px;
		background: #FFFFFF;
		border-radius: 12px;
		
		display: flex;
		align-items: center;
		margin: auto;
		margin-top: 12px;
		
		text-indent: 30px;
		
		image{
			left: 28px;
		}
	}
</style>
